<!DOCTYPE html>
<html lang="zh">

<head>
    <title>leadlet+高德地图 测试</title>
    <!-- <meta charset="utf-8" /> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/vue.resource/1.2.0/vue-resource.min.js"></script>
    <!--leaflet markercluster component dependencies-->
    <script src="https://unpkg.com/leaflet.markercluster@1.0.3/dist/leaflet.markercluster.js"></script>
    <link href="//cdn.bootcss.com/leaflet.markercluster/1.0.0-rc.1.0/MarkerCluster.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/leaflet.markercluster/1.0.0-rc.1.0/MarkerCluster.Default.css" rel="stylesheet">
    <!--font awesome-->
    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.css">
    <script src="https://unpkg.com/leaflet-easybutton@2.0.0/src/easy-button.js"></script>
</head>

<body>
    <!-- <div id="mapid" style="width:600px; height:400px"></div> -->
    <div id="mapid" style="height:800px"></div>
    <!-- 必须指定高度 -->

    <a href="/upload">上传图片<a>

    <script>
        var app = new Vue({
            el: '#mapid',
            data: {
                message: 'Hello Vue!'
            },
            mounted: function () {
                this.$nextTick(function () {
                    // 代码保证 this.$el 在 document 中
                    this.initMap();
                    this.placeAjax(); // ajax异步加载，注意信息同步
                    this.addButton();
                })
            },
            methods: {
                initMap() {
                    this.mymap = L.map('mapid', {
                        zoom: 7, //初始聚焦程度
                        center: [23.16, 113.23], //广州 [lat, lng] [纬度, 经度]
                        minZoom: 3, //最宽广，越小越宽广
                        maxZoom: 18, //最细致，越大越细致
                    });
                    L.tileLayer(
                        'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
                            subdomains: ["1", "2", "3", "4"], //可用子域名，用于浏览器并发请求
                            attribution: "&copy; 高德地图", //可以修改为其它内容
                        }).addTo(this.mymap); //添加tile层到地图

                    this.popup = L.popup();
                    this.mymap.on('click', this.onMapClick);

                    this.markers = L.markerClusterGroup();
                    this.latlngs = null;
                },
                onMapClick(e) {
                    this.popup
                        .setLatLng(e.latlng)
                        .setContent("您所点击的位置的经纬度为" + '<br>' + e.latlng['lng'] + '<br>' + e.latlng['lat'])
                        .openOn(this.mymap);
                },
                addMarker(lat, lng, imgsrc) {
                    var guangZhouTa = [lat, lng];
                    var marker = L.marker(guangZhouTa);

                    var popupContent = document.createElement("img");
                    popupContent.onload = function () {
                        // marker.openPopup();
                        marker.update();
                    };
                    popupContent.src = imgsrc;
                    popupContent.style.width = '500px';
                    marker.bindPopup(popupContent, {
                        maxWidth: "auto"
                    }); //为了图片出现的位置正确, 参考http://stackoverflow.com/questions/38170366/leaflet-adjust-popup-to-picture-size
                    this.markers.addLayer(marker);

                    // 产生最外围的边界
                    if(this.latlngs == null){
                        this.latlngs = [guangZhouTa, guangZhouTa, guangZhouTa, guangZhouTa]
                    }
                    if(lat>this.latlngs[0][0]){
                        this.latlngs[0] = guangZhouTa;
                    }
                    if(lat<this.latlngs[2][0]){
                        this.latlngs[2] = guangZhouTa;
                    }
                    if(lng>this.latlngs[1][1]){
                        this.latlngs[1] = guangZhouTa;
                    }
                    if(lng<this.latlngs[3][1]){
                        this.latlngs[3] = guangZhouTa;
                    }
                    
                },
                placeAjax() {
                    // GET /someUrl
                    this.$http.get('/api/places').then(response => {

                        // get body data
                        var someData = response.body;
                        // console.log(someData)
                        for (index in someData) {
                            var item = someData[index]
                            // console.log(item.lat, item.lng, item.img)
                            this.addMarker(item.lat, item.lng, item.img)
                        }

                        this.mymap.addLayer(this.markers);  
                        // this.markers.addTo(this.mymap);

                        this.mymap.fitBounds(this.markers.getBounds());
                        // this.mymap.fitBounds(latlngs);
                        //console.log(this.latlngs);
                        // L.polyline(this.latlngs).addTo(this.mymap);
                        // L.polygon(this.markers.getBounds()).addTo(this.mymap); // no effect
                        L.polygon(this.latlngs,{opacity:0.8, fillOpacity:0.05}).addTo(this.mymap);

                    }, response => {
                        // error callback
                        console.log('error')
                    });
                },
                addButton() { 
                    // https://github.com/CliffCloud/Leaflet.EasyButton
                    L.easyButton('fa-refresh', this.refresh).addTo(this.mymap);
                },
                refresh() {
                    this.mymap.fitBounds(this.latlngs);
                },
            }
        })
    </script>
</body>

</html>